<template>
  <view class="stepper">
    <button :disabled="value === 1" @click.stop="handleReduce">-</button>
    <input
      class="count"
      type="number"
      v-model="props.value"
      @blur="inputChange"
    />
    <button @click.stop="handleAdd">+</button>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { message } from "@/utils/utils";

const props = defineProps({
  value: {
    type: Number || String,
    default: 1,
  },
  detail: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(["update:value", "change"]);

const handleReduce = () => {
  if (props.value === 1) return;
  getApp()
    .sr()
    .track("add_to_cart", {
      action_type: "remove_from_cart",
      sku: {
        sku_id: props.detail.productSkuId,
        sku_name: skuLabel(props.detail.productSkuSpData),
      },
      spu: {
        spu_id: props.detail.productSkuId, // 若商品无spu_id时，可传sku_id信息
        spu_name: skuLabel(props.detail.productSkuSpData), // 若商品无spu_name时，可传sku_name信息
      },
      sku_num: props.value - 1,
      // more...
    });

  emits("update:value", props.value - 1);
  emits("change", props.value - 1);
};
const handleAdd = () => {
  getApp()
    .sr()
    .track("add_to_cart", {
      action_type: "append_to_cart",
      sku: {
        sku_id: props.detail.productSkuId,
        sku_name: skuLabel(props.detail.productSkuSpData),
      },
      spu: {
        spu_id: props.detail.productSkuId, // 若商品无spu_id时，可传sku_id信息
        spu_name: skuLabel(props.detail.productSkuSpData), // 若商品无spu_name时，可传sku_name信息
      },
      sku_num: props.value + 1,
      // more...
    });

  emits("update:value", props.value + 1);
  emits("change", props.value + 1);
};

const inputChange = (e) => {
  if (parseInt(e.detail.value) > props.detail.inStock) {
    message("亲,商品库存不足,无法再买更多哦~");

    if (props.detail.inStock - props.value > 0) {
      getApp()
        .sr()
        .track("add_to_cart", {
          action_type: "append_to_cart",
          sku: {
            sku_id: props.detail.productSkuId,
            sku_name: skuLabel(props.detail.productSkuSpData),
          },
          spu: {
            spu_id: props.detail.productSkuId, // 若商品无spu_id时，可传sku_id信息
            spu_name: skuLabel(props.detail.productSkuSpData), // 若商品无spu_name时，可传sku_name信息
          },
          sku_num: props.detail.inStock - props.value,
          // more...
        });
    } else {
      getApp()
        .sr()
        .track("add_to_cart", {
          action_type: "append_to_cart",
          sku: {
            sku_id: props.detail.productSkuId,
            sku_name: skuLabel(props.detail.productSkuSpData),
          },
          spu: {
            spu_id: props.detail.productSkuId, // 若商品无spu_id时，可传sku_id信息
            spu_name: skuLabel(props.detail.productSkuSpData), // 若商品无spu_name时，可传sku_name信息
          },
          sku_num: props.value - props.detail.inStock,
          // more...
        });
    }
    emits("update:value", props.detail.inStock);
    emits("change", props.detail.inStock);
  } else {
    if (parseInt(e.detail.value) - props.value > 0) {
      getApp()
        .sr()
        .track("add_to_cart", {
          action_type: "append_to_cart",
          sku: {
            sku_id: props.detail.productSkuId,
            sku_name: skuLabel(props.detail.productSkuSpData),
          },
          spu: {
            spu_id: props.detail.productSkuId, // 若商品无spu_id时，可传sku_id信息
            spu_name: skuLabel(props.detail.productSkuSpData), // 若商品无spu_name时，可传sku_name信息
          },
          sku_num: parseInt(e.detail.value) - props.value,
          // more...
        });
    } else {
      getApp()
        .sr()
        .track("add_to_cart", {
          action_type: "append_to_cart",
          sku: {
            sku_id: props.detail.productSkuId,
            sku_name: skuLabel(props.detail.productSkuSpData),
          },
          spu: {
            spu_id: props.detail.productSkuId, // 若商品无spu_id时，可传sku_id信息
            spu_name: skuLabel(props.detail.productSkuSpData), // 若商品无spu_name时，可传sku_name信息
          },
          sku_num: props.value - parseInt(e.detail.value),
          // more...
        });
    }
    emits("update:value", parseInt(e.detail.value));
    emits("change", parseInt(e.detail.value));
  }
};

const skuLabel = (skuData) => {
  return skuData.map(({ value, key }) => `${key}${value}`).join(" ");
};
</script>

<style lang="less" scoped>
.stepper {
  display: flex;
  align-items: center;
  .count {
    width: 38px;
    text-align: center;
  }
  button {
    width: 22px;
    height: 22px;
    line-height: 21px;
    font-size: 14px;
    background: #f7f7f7;
    border-radius: 2px;
    padding: 0;
    &::after {
      border: none;
    }
  }
}
</style>
